//渲染数据
$(function () {
    var options = {
        url: "./static/list.json",
        type: "GET",
        datatype: "json",
        success: function (res) {

            render(res);
        },
        error: function (xhr) {
            console.log(xhr);
        }
    }
    $.ajax(options);

})

function render(arr) {


    var group = document.querySelector(".group");
    var property = document.querySelector(".property");
    group.innerHTML = arr.data.map(item =>
        `
            <div class="item">
            <div class="item-clo">
                <img src="${item.img}" alt="">
            </div>
            <div class="text-box">
                <h4>${item.title}</h4>
                <span>${item.con}</span>
                <p>${item.price}</p>
                <button data-id="${item.id}" class="add_cart">加入购物车</button>
            </div>
        </div>
            `
    ).join("");

    ///////////////////
    var cart = getCarData();
    function getCarData(cart_name = "cart") {
        try {
            var res = JSON.parse(localStorage.getItem(cart_name));
            if (res === null) return {};
            return res;
        } catch (e) {
            return {};
        }
    }
    //事件委托 添加事件 获取每个商品的唯一识别符id
    $(".group").on("click", ".add_cart", function () {
        var id = $(this).attr("data-id");
        //判断cart对象里面是否存在当前的id
        if (id in cart) {
            //如果存在让让数量++
            cart[id]++;

        } else {
            //如果不存在建立初始结构
            cart[id] = 1;
        }
        //把cart数据保存在localstorage里面
        localStorage.setItem("cart", JSON.stringify(cart));
    })


    //////////////////////////////////
    property.innerHTML = arr.watch.map(item =>
        `
        
        <h1>${item.name}</h1>
        <h2>价格：￥2388</h2>
        <p class="p1">商品编码：${item.number}</p>
        <p class="p2">促销:【6.11特惠预订】：① 预订省100元 ②下单享3期免息 ③6月11日0点支付尾款 丨点击立即前往预订>>></p>
        <p class="p3">已选择商品：${item.shop}</p>
        <div class="goumai"><a href="javascripts:;">点击购买</a></div>
        `
    ).join("")
}
//放大镜模块
$(function () {
    function Magnifier() {
        // 创建设计好程序需要的数据
        // 小图元素; 
        this.small_img = document.querySelector(".small-img");
        // 焦点元素; 
        this.focus = document.querySelector(".focus");
        // 大图焦点元素; 
        this.big_img_focus = document.querySelector(".big-img");
        // 大图图片 ; 
        this.big_img = this.big_img_focus.querySelector("img");

        // 所有内容的容器 :
        this.container = document.querySelector(".container");

        // 获取到容器的偏移; 
        this.container_offset = {
            left: this.container.offsetLeft,
            top: this.container.scrollTop
        }
        // 获取focus的宽高; 

        this.focus_style = getComputedStyle(this.focus);
    }
    // 绑定事件; 
    Magnifier.prototype.bindEvent = function () {
        // 给小图绑定事件; 
        var instance = this;
        // 鼠标移入小图，应该让小图焦点和大图焦点同时显示; 
        this.small_img.onmouseover = function () {
            instance.toggle("block");
        }
        // 鼠标移出小图，应该让小图焦点和大图焦点同时隐藏; 
        this.small_img.onmouseout = function () {
            instance.toggle("none");
        }
        // 给元素绑定鼠标移动事件; 
        this.small_img.onmousemove = function (evt) {
            // 获取鼠标的信息 : x,y 
            // 这个鼠标信息是用来让focus定位的; 
            // - 一致性 ;
            // - 定位元素的参照物 和鼠标位置的 参照 要一致; 
            var e = e || event;
            // 如果是用 client获取鼠标的位置，那么我们需要减去 容器的左侧偏移量和上侧的偏移量; 

            instance.move(e.clientX - instance.container_offset.left, e.clientY - instance.container_offset.top);
        }
    }
    // 切换图片显示隐藏; 
    Magnifier.prototype.toggle = function (type) {
        this.focus.style.display = type;
        this.big_img_focus.style.display = type;
    }
    // 让图片跟随移动; 
    Magnifier.prototype.move = function (x, y) {

        var _left = x - parseInt(this.focus_style.width) / 2
        var _top = y - parseInt(this.focus_style.height) / 2

        // 因为我们的焦点框不能移出到外部，所以我们要给焦点框设置边界; 

        // left 值边界 : 
        // 最小边界， 最大边界; 
        _left = _left < 0 ? 0 : _left;
        _left = _left > 149 ? 149 : _left;

        _top = _top < 0 ? 0 : _top;
        _top = _top > 149 ? 149 : _top;


        this.focus.style.left = _left + "px";
        this.focus.style.top = _top + "px";

        // 大图跟随 : 
        // - left值移动的比例; 
        var _left_per = _left / 149;
        var _top_per = _top / 149;

        // 计算大图的总路程; 大图片的宽度 - 大图焦点的宽度;  
        // 求得结果 260 ; 

        this.big_img.style.left = -400 * _left_per + "px";
        this.big_img.style.top = -400 * _top_per + "px";
    }
    var m = new Magnifier();

    m.bindEvent();

})
